<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<meta charset="utf-8">
	<meta name="csrf-token" content="{{ csrf_token() }}">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>
		@if($Status == "正常")
		学员列表
		@else
		蓝海列表
		@endif
	</title>
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/font-awesome/css/font-awesome.min.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/css/bootstrap.min.css')}}?t={{time()}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/index.css')}}">
	<link rel="stylesheet" href="{{URL::asset('vendor/element-ui/lib/theme-chalk/reset.style.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/list.css')}}">
	<link rel="stylesheet" href="{{URL::asset('css/consultation/st.css')}}">
	<script src="{{URL::asset('js/jquery.min.js')}}"></script>
	<script src="{{URL::asset('vendor/laravel-admin/AdminLTE/bootstrap/js/bootstrap.min.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/ext/vue.js')}}"></script>
	<script src="{{URL::asset('vendor/element-ui/lib/index.js')}}"></script>
</head>
<body style="padding:30px;background-color:#F3F3F4;">
<div id="main">
	<el-card class="search-tool-box">
		<el-collapse v-model="open_tool_box">
			<el-collapse-item name="true">
				<template slot="title">
					<h4 style="text-indent:2rem;">查询工具栏</h4>
				</template>
				<el-form inline :model="seaForm" label-width="100px" class="seaForm">
					<el-form-item label="报名时间">
						<el-date-picker v-model="seaForm.enroll_at" type="date"
							placeholder="报名时间" value-format="yyyy-MM-dd" size="small">
						</el-date-picker>
					</el-form-item>
					<el-form-item label="阶段">
						<el-select v-model="seaForm.step" filterable size="small" clearable placeholder="阶段">
							<el-option label="初始" value="初始"></el-option>
							<el-option label="试听" value="试听"></el-option>
							<el-option label="报名" value="报名"></el-option>
							<el-option label="二报" value="二报"></el-option>
							<el-option label="新班家长会" value="新班家长会"></el-option>
							<el-option label="开班" value="开班"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="seaForm.status" filterable size="small" placeholder="状态">
							@if($Status == "正常")
							<el-option label="正常" value="正常"></el-option>
							<el-option label="入学中" value="入学中"></el-option>
							<el-option label="已入学" value="已入学"></el-option>
							@else
							<el-option label="蓝海" value="蓝海"></el-option>
							<el-option label="退学" value="退学"></el-option>
							<el-option label="淘汰" value="淘汰"></el-option>
							@endif
						</el-select>
					</el-form-item>
					<el-form-item label="电话号码">
						<el-input v-model="seaForm.primary_phone" placeholder="电话号码" size="small"></el-input>
					</el-form-item>
					<el-form-item label="学生姓名">
						<el-input v-model="seaForm.name" placeholder="学生姓名" size="small"></el-input>
					</el-form-item>
					<el-form-item label="家长姓名">
						<el-input v-model="seaForm.primary_parent_name" placeholder="家长姓名" size="small"></el-input>
					</el-form-item>
					<el-form-item label=" ">
						<el-button type="primary" @click="doSearch"
							icon="el-icon-search" size="small" plain>
							查询
						</el-button>
					</el-form-item>
				</el-form>
			</el-collapse-item>
		</el-collapse>
	</el-card><hr>
	<el-card class="table-box">
		<div slot="header" class="el-card-header" align="right">
			<div class="btn-group">
				<el-button-group>
					<button type="button" class="el-button el-button--primary el-button--small is-plain " data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
						<i class="el-icon-download"></i>导出 <span class="caret"></span>
					</button>
					<ul class="dropdown-menu">
						<li @click="dataExport('curpage')">导出本页</li>
						<li @click="dataExport('selected')">导出选中</li>
						<li @click="dataExport('all')">导出全部</li>
					</ul>
					<el-button plain size="small" icon="el-icon-refresh"
						@click="getData" type="info">
						刷新
					</el-button>
					<el-button plain size="small" icon="el-icon-delete"
						@click="destory" type="danger">
						删除
					</el-button>
					@if($Status == "正常")
					<el-button plain size="small" type="danger" @click="mvOcean('蓝海')">
						移入蓝海
					</el-button>
					@else
					<el-button plain size="small" type="warning" @click="mvOcean('正常')">
						状态
					</el-button>
					@endif
				</el-button-group>
			</div>
		</div>
		<div class="el-card-body">
			<el-table :data="table.data" border @sort-change="reSort"
				v-loading.fullscreen.lock="table.loading" @selection-change="handleSelectionChange">
				<el-table-column align="center" prop="id" type="selection" width="55">
				</el-table-column>
			  	<el-table-column align="center" prop="name" label="学生姓名">
			  	</el-table-column>
				<el-table-column align="center" prop="age" label="年龄">
				</el-table-column>
				<el-table-column align="center" prop="primary_parent_name" label="家长姓名">
				</el-table-column>
				<el-table-column align="center" prop="primary_phone" label="联系方式">
				</el-table-column>
				<el-table-column align="center" prop="enroll_at" label="报名时间" sortable>
				</el-table-column>
				<el-table-column align="center" prop="step" label="进度">
				</el-table-column>
				<el-table-column align="center" label="个人中心">
					<template slot-scope="scope">
						<el-button icon="fa fa-user" plain circle
							size="small" type="primary" @click="vOpen(scope.row)">
						</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				align="right"
				@size-change="pageSizeChange"
				@current-change="curPageChange"
				:current-page="seaForm.page.pageNumber"
				:page-sizes="[10, 25, 50]"
				:page-size="seaForm.page.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="seaForm.page.total">
			</el-pagination>
		</div>
	</el-card>


	<el-dialog title="目标状态" :visible.sync="dialogFormVisible" width="300px"
		lock-scroll :show-close="false" :close-on-click-modal="false">
		<el-select v-model="attrStatus" placeholder="请选目标状态">
			<el-option label="正常" value="正常"></el-option>
			<el-option label="淘汰" value="淘汰"></el-option>
			<el-option label="退学" value="退学"></el-option>
		</el-select>
		<div slot="footer" class="dialog-footer">
		<el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
		<el-button size="small" type="primary" @click="sureMv">确 定</el-button>
		</div>
	</el-dialog>
</div>
</body>
<script type="text/javascript">
let main = new Vue({
	el:"#main",
	data:{
		open_tool_box:"false",
		dialogFormVisible:false,
		selected_ids:[],
		attrStatus:"",
		seaForm:{
			enroll_at:"",
			primary_phone:"",
			name:"",
			primary_parent_name:"",
			step:"",
			status:"{{$Status}}",
			_token:"{{csrf_token()}}",
			sort:{
				sortBy:"id",
				orderBy:"desc",
			},
			page:{
				pageSize:10,
				pageNumber:1,
				total:0
			}
		},
		table:{
			loading:false,
			data:[]
		}
	},
	mounted:function() {
		this.init();
	},
	methods:{
		init() {
			this.getData();
		},
		doSearch() {
			this.open_tool_box = "false";
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		getData() {
			this.table.loading = true;
			let url = "{{URL::asset('admin/consultation/st_list/get_data')}}";
			let params = this.seaForm;
			$.post(url,params,function(res) {
				main.table.loading = false;
				if(res.code == 1){
					main.$message.success(res.msg);
					main.table.data = res.data.rows;
					main.seaForm.page.total = res.data.total;
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			})
		},
		reSort(col) {
			if(col.prop){
				this.seaForm.sort.sortBy = col.prop;
				if(col.order == "ascending"){
					this.seaForm.sort.orderBy = "asc";
				}else{
					this.seaForm.sort.orderBy = "desc";
				}
			}else{
				this.seaForm.sort.sortBy = "id";
				this.seaForm.sort.orderBy = "desc";
			}
			this.doSearch();
		},
		pageSizeChange(val) {
			this.seaForm.page.pageSize = val;
			this.seaForm.page.pageNumber = 1;
			this.getData();
		},
		curPageChange(val) {
			this.seaForm.page.pageNumber = val;
			this.getData();
		},
		dataExport(export_type) {
			let url = "{{URL::asset('admin/consultation/st_list/export_data')}}";
			let params = {
				_token:"{{csrf_token()}}",
				export_type:export_type,
				offset:0,
				where_status:this.seaForm.status
			};
			switch (export_type) {
				case "selected":
					if(this.checkSelectedIds()){
						return false;
					}
					params.ids = this.selected_ids.join(",");
					break;
				case "curpage":
					let length = this.table.data.length;
					curPageIds = [];
					for(let i=0;i<length;i++){
						curPageIds.push(this.table.data[i].id)
					}
					params.ids = curPageIds.join(",");
					break;
			}
			this.table.loading = true;
			this.doExport(url,params);
		},
		doExport(url,params) {
			$.post(url,params,function(res) {
				if(res.code == 1){
					if(res.data.status == "done") {
						main.table.loading = false;
						window.open("{{URL::asset('excel')}}/"+res.data.fileName);
					}else{
						params.offset += 1;
						main.doExport(url,params);
					}
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			});
		},
		checkSelectedIds() {
			if(this.selected_ids.length < 1){
				this.$notify.error({title:"Error",message:"请至少选择一条数据进行操作"});
				return true;
			}
			return false;
		},
		handleSelectionChange(val) {
			let length = val.length;
			this.selected_ids = [];
			for(let i=0;i<length;i++){
				this.selected_ids.push(val[i].id)
			}
		},
		destory() {
			if(this.checkSelectedIds()){
				return false;
			}
			this.$confirm('删除后不可恢复是否继续？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				let url = "{{URL::asset('admin/consultation/st_list/destroy')}}";
				let param = {
					ids:this.selected_ids,
					_token:"{{csrf_token()}}"
				};
				$.post(url,param,function(res) {
					if(res.code == 1){
						main.$notify({type:"success",title:"Success",message:res.msg});
						main.getData();
					}else{
						main.$notify.error({title:"Error",message:res.msg});
					}
				});
			}).catch(() => {});
		},
		mvOcean(attr_status) {
			if(this.checkSelectedIds()){
				return false;
			}
			if(attr_status == "蓝海"){
				this.$confirm('确认要操作这些数据吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.doMv(attr_status);
				}).catch(() => {});
			}else{
				this.dialogFormVisible = true;
			}
		},
		sureMv() {
			this.dialogFormVisible = false;
			this.$confirm('目标状态为 “'+this.attrStatus+'” 确认要操作这些数据吗？', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.doMv(this.attrStatus);
			}).catch(() => {});
		},
		doMv(attr_status) {
			let url = "{{URL::asset('admin/consultation/st_list/change_status')}}";
			let param = {
				ids:this.selected_ids,
				_token:"{{csrf_token()}}",
				status:attr_status
			};
			$.post(url,param,function(res) {
				if(res.code == 1){
					main.$notify({type:"success",title:"Success",message:res.msg});
					main.getData();
				}else{
					main.$notify.error({title:"Error",message:res.msg});
				}
			});
		},
		vOpen(row) {
			let url = "{{URL::asset('admin/consultation/register')}}?phone=";
			url += row.primary_phone + "&st_id=" + row.id;
			window.open(url);
		}
	}
})
</script>
</html>
